<template>
	<view class="content">
		<view class="padding">
			<view class="padding ffffff radius">
				<view class="">
					<view class="nofocusbgc">标题</view>
					<view class="flexleft margin_top">
						<textarea name="" id="" cols="10" rows="10" placeholder-class="placeHolder" placeholder="请输入标题"
							style="height: 140rpx;font-size: 30rpx;" v-model="title"></textarea>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top">
				<view class="">
					<view class="nofocusbgc">描述</view>
					<view class="flexleft margin_top">
						<textarea name="" id="" cols="10" rows="10" placeholder-class="placeHolder" placeholder="请输入描述"
							style="height: 140rpx;font-size: 30rpx;" v-model="description"></textarea>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top">
				<view class="flexbetween">
					<view class="nofocusbgc">奖励价格</view>
					<view class="flexleft">
						<input class="text_g textright" type="digit" placeholder="请输入奖励价格"
							placeholder-style="color: #999999;font-size: 30rpx;" v-model="price">
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top">
				<view class="nofocusbgc">回答有效期</view>
				<!-- 天数是后台维护的 -->
				<view class="flexleft margin_top">
					<view :class="item.is_checked?'select margin_right2':'noSelect margin_right2'" @click="select(item)"
						v-for="(item,index) in day_arr" :key="item.id">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top" style="margin-bottom: 100rpx;">
				<view class="nofocusbgc">上传图片（{{martial_images_arr.length}}/3）</view>
				<view class="flexleft flex_wrap">
					<view class="item_image_box margin_top" v-for="(item,index) in martial_images_arr" :key="index">
						<view class="item_image radius">
							<image :src="item" mode=""></image>
							<view class="deletimg" @click="deleimage(index,martial_images_arr)"></view>
						</view>
					</view>
					<!-- 图片盒子 -->
					<view class="item_image_box margin_top" @click="uploadImg(martial_images_arr,3)"
						v-if="martial_images_arr.length<3">
						<view class="item_image radius">
							<image src="/static/image/home/noimage.png" mode=""></image>
							<!-- <view class="deletimg"></view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 固定底部 -->
			<view class="gudingdb">
				<view class="bigbtn" @click="sendShow">发布</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				title: "", //标题
				description: "", //描述
				price: "", //打赏价格
				timeType: 0,
				martial_images: [], //图片
				martial_images_arr: [], //图片
				show_id: "", //id
				show_info: {}, //详情
				day_arr: [],
				service_type: 0, //类别:1=天聊,2=天学
				expire_days: 0, //回答有效期
			}
		},
		onLoad(options) {
			if (options.id) {
				this.show_id = options.id
				uni.setNavigationBarTitle({
					title: "编辑打赏抢答"
				})
			}
			this.service_type = options.type
			this.getform()
		},
		methods: {
			getform() { //详情
				let _this = this
				httpRequest.request('/api/community/getform', 'GET', {
					id: _this.show_id
				}).then(res => {
					if (res.code == 1) {
						// _this.title = res.data.title
						// _this.description = res.data.description
						let arr2 = res.data.days_arr
						let star_sign_arr = []
						for (let key in arr2) {
							star_sign_arr.push({
								id: key,
								name: arr2[key]
							})
						}
						this.day_arr = star_sign_arr
						console.log(this.day_arr);
						this.day_arr.forEach(item => {
							this.$set(item, "is_checked", false)
						})
						console.log(this.day_arr);
						if (res.data.info) {
							_this.title = res.data.info.title
							_this.description = res.data.info.description
							_this.price = res.data.info.price
							_this.expire_days = res.data.info.expire_days
							let index = this.day_arr.findIndex(item => {
								return item.id == res.data.info.expire_days
							})
							if(index!=-1){
								this.day_arr[index].is_checked = true
							}
							_this.martial_images_arr = res.data.info.images_arr ? res.data.info.images_arr : []
							_this.martial_images = res.data.info.images ? res.data.info.images.split(",") : []
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			select(item) {
				if(this.show_id){
					httpRequest.toast("不可修改回答有效期！");
					return false
				}
				this.day_arr.forEach(value => {
					value.is_checked = false
				})
				item.is_checked = !item.is_checked
				this.expire_days = Number(item.id)
			},
			sendShow() { //发布
				let _this = this
				if (!_this.title) {
					httpRequest.toast("请输入标题！");
					return false
				}
				if (!_this.description) {
					httpRequest.toast("请输入描述！");
					return false
				}
				if (!_this.price) {
					httpRequest.toast("请输入奖励价格！");
					return false
				}
				if (!_this.expire_days) {
					httpRequest.toast("请选择回答有效期！");
					return false
				}
				httpRequest.request('/api/community/publish', 'POST', {
					id: _this.show_id,
					title: _this.title, //标题
					description: _this.description, //描述
					images: _this.martial_images.join(), //图片
					price: _this.price, //打赏价格
					type: 3, //类型:1=视频,2=论坛,3=打赏抢答
					service_type: _this.service_type, //类别:1=天聊,2=天学
					expire_days: _this.expire_days, //回答有效期（天）
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			uploadImg(value, length) {
				let that = this;
				let martial_images = that.martial_images
				let martial_images_arr = that.martial_images_arr
				if (martial_images.length >= length) {
					httpRequest.toast('最多上传' + length + '张图片');
					return;
				}
				this.upFile.chooseImage({
					count: length - martial_images.length
				}, function(res) {
					console.log(res);
					martial_images_arr.push(res.fullurl)
					martial_images.push(res.url)
					console.log(martial_images_arr, martial_images);
					that.martial_images_arr = martial_images_arr
					that.martial_images = martial_images
				})
			},
			deleimage(i, upimg) { //删除图片
				upimg.splice(i, 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.placeHolder {
		color: #999999;
		font-size: 30rpx;
	}

	.nofocusbgc {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.noSelect {
		width: 138rpx;
		height: 69rpx;
		line-height: 69rpx;
		text-align: center;
		background: rgba(102, 102, 102, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid rgba(102, 102, 102, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.select {
		width: 138rpx;
		height: 69rpx;
		line-height: 69rpx;
		text-align: center;
		background: rgba(243, 39, 28, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #F3271C;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
	}

	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>